﻿@page "/docs/extensions/loadingindicator"

<Seo Canonical="/docs/extensions/loadingindicator" Title="Blazorise LoadingIndicator component" Description="Learn how to use Blazorise LoadingIndicator extension component, a wrapper component that adds a loading indicator to a child content." />

<DocsPageTitle Path="Extensions/LoadingIndicator">
    Blazorise LoadingIndicator component
</DocsPageTitle>

<DocsPageLead>
    A wrapper component that adds a loading indicator to a child content. Default spinner courtesy of <Blazorise.Link To="https://icons8.com/preloaders/en/search/spinner#" Target="Target.Blank">icons8.com</Blazorise.Link>.
</DocsPageLead>

<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="LoadingIndicatorNugetInstallExample"></DocsPageSectionSource>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Imports">
        In your main <Code>_Imports.razor</Code> add:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="LoadingIndicatorImportsExample"></DocsPageSectionSource>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Static files">
        Include CSS link into your <Code>index.html</Code> or <Code>_Layout.cshtml</Code> / <Code>_Host.cshtml</Code> file, depending if you’re using a Blazor WebAssembly or Blazor Server side project.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="LoadingIndicatorResourcesExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic example">
        The basic usage scenario for <Code>LoadingIndicator</Code> with default settings using a <Code>LoadingIndicator</Code> object reference.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <LoadingIndicatorBasicExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="LoadingIndicatorBasicExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Two-way Binding Example">
        Having a more declarative approach to control the indicator is also supported. To make it work, you just need to bind a variable to the <Code>Visible</Code> parameter, and it will work.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <LoadingIndicatorTwoWayBindingExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="LoadingIndicatorTwoWayBindingExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Application busy service">
        Use <Code>ApplicationLoadingIndicator</Code> to add a global application busy UI. Register <Code>ILoadingIndicatorService</Code> as a scoped service in your configuration. <Code>ApplicationLoadingIndicator</Code> automatically registers with <Code>ILoadingIndicatorService</Code> if one is registered or unless <Code>Service</Code> property is set directly. Use dependency injection to obtain a reference to the <Code>ILoadingIndicatorService</Code> to control <Code>ApplicationLoadingIndicator</Code>. The application busy UI comes with an awesome Blazorise logo spinner, which is recommended, but if you prefer the default spinner set <Code>IndicatorTemplate</Code> to <Code>null</Code>.
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        Add <Code>ILoadingIndicatorService</Code> as a scoped service.
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="LoadingIndicatorAddScopedExample" />
    <DocsPageSectionContent>
        Add <Code>ApplicationLoadingIndicator</Code> to your <Code>App.razor</Code> file.
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="LoadingIndicatorApplicationWrapperExample" />
    <DocsPageSectionContent>
        Inject <Code>ILoadingIndicatorService</Code> into your component where you want to trigger the application busy UI from.
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="LoadingIndicatorApplicationBusyExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Using as cascading parameter">
        You can also use the wrapper as a cascading parameter.
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        To implement a global application busy UI using cascading parameter add the wrapper to your main layout.
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="LoadingIndicatorCascadingWrapperExample" />
    <DocsPageSectionContent>
        Declare a <Code>CascadingParameter</Code> of type <Code>LoadingIndicator</Code> in your component.
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="LoadingIndicatorCascadingBusyExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Disabling input controls">
        While the busy screen prevents click events from reaching child content it has no effect on keyboard input. You may want to disable your input controls such as textboxes and buttons while your component is busy.
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        Using the <Code>Visible</Code> property directly.
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="LoadingIndicatorBusyReferenceExample" />
    <DocsPageSectionContent>
        Disabling your controls using <Code>LoadingIndicatorService</Code>.
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="LoadingIndicatorBusyServiceExample" />
    <DocsPageSectionContent>
        Disable the entire input form using <Code>&lt;fieldset&gt;</Code>
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="LoadingIndicatorBusyFormExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Using animation">
        Loading indicator can animate its visibility state by fading into view. This is on by default for <Code>ApplicationLoadingIndicator</Code>. You can also use the <Code>Animate</Code> component to add a visual effect.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <LoadingIndicatorAnimationExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="LoadingIndicatorAnimationExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(LoadingIndicator)]" />